<template>
  <CommonCard title="今日订单" :value="orderToday|numberFormat">

    <!-- <div ref="chart" style="width:100%;height:100%"></div> -->
    <v-chart :option="getOption()" autoresize></v-chart>

    <template #bottom>
      <span>昨日订单量</span>
      <span class="emphasis">{{orderLastDay|numberFormat}}</span>
    </template>

  </CommonCard>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'TodayOrders',

  // mounted() {
  //   // 初始化生成一个图表对象
  //   this.chart = this.$echarts.init(this.$refs.chart)
  //   // 生成一个option配置对象
  //   // 设置配置
  //   this.chart.setOption(this.getOption())

  //   // 绑定容器大小改变的监听
  //   window.addEventListener('resize', () => {
  //     this.chart.resize()  // 根据当前容器大小来重新绘制
  //   })
  // },

  // // 监视数据变化 => 重新设置图表的option
  // watch: {
  //   orderTrendAxis () {
  //     this.chart.setOption(this.getOption())
  //   }
  // },

  computed: {
    ...mapState({
      "orderToday": state => state.data.reportData.orderToday,
      "orderLastDay": state => state.data.reportData.orderLastDay,
      "orderTrend": state => state.data.reportData.orderTrend || [],
      "orderTrendAxis": state => state.data.reportData.orderTrendAxis || [],
    })
  },

  methods: {
    getOption () {
      return {
        // x轴
        xAxis: {
          show: false, // 不显示
          boundaryGap: false, // 坐标轴两边是否留白
          data: this.orderTrendAxis
        },
        // y轴
        yAxis: {
          show: false, // 不显示
        },
        // 系列数据
        series: {
          name:'实时订单数',
          type: 'line',
          data: this.orderTrend,
          // 区域填充
          areaStyle: {
            color: '#A64CA6'
          },
          // 平滑的线
          smooth: true,
          // 隐藏线条
          itemStyle: {
            opacity: 0
          },
          // 隐藏点
          lineStyle: {
            opacity: 0
          }
        },

        // grid: 网格组件
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
        },

        // 提示
        tooltip: {
          trigger: 'axis',
          // 将 tooltip 框限制在图表的区域内
          // confine: true,
           // 指定提示框的位置
           position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角为原点，x轴向右，y轴向下

            // x坐标位置
            let x = 0;
            // 当前鼠标X轴位置
            let pointX = point[0];
            // 提示框的宽度
            let boxWidth = size.contentSize[0];
            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else { // 左边放的下
              x = 5 + pointX - boxWidth;
            }
            // 返回左上角的x和y坐标值
            return [x, -40];
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
